<template>
	<view style="padding-bottom: 30px;">
		<view class="sale_good">
			<image :src="goods.img" mode=""></image>
			<view class="sale_goodBox">
				<text class="sale_pa">{{goods.name}}</text>
				<text class="sale_pa">{{goods.attr}}</text>
				<span class="sale_pb">
					<text class="price">{{goods.price}}</text>
					<text class="num">x{{goods.num}}</text>
				</span>
			</view>
		</view>
		<view class="comment_share">
			<textarea placeholder-class="color999 font28" v-model="content" placeholder="分享本次购物体验，2~256字" />

			<view class="comment_shareBox"><text class="comment_pc">您的评价可以帮助其他小伙伴哦~</text></view>
			<text class="comment_pa">发图片</text>

			<view class="upload-content">
				<!-- <block>
					<view class="upload-item">
						<image class="upload-img" src="../../static/images/home/goods1.jpg" mode="aspectFill"></image>
					</view>
				</block> -->
				<!-- <view class="upload-add-btn"></view> -->
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
		</view>
		<view class="comment_final">
			<view class="comment_finalBox">
				<text class="comment_finalTit">综合评价</text>
				<u-rate :count="count" v-model="value"></u-rate>
			</view>
		</view>

		<view class="submit" @click="saveOrderEvaluateAdd">提交</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		saveOrderEvaluateAdd
	} from "@/api/index.js"
	export default {
		data() {
			return {
				orderId: '',
				goods: [],
				content: '',
				count: 5,
				value: 0,
				fileList1: [],
				index:0
			}
		},
		onLoad(optoin) {
			this.orderId = optoin.orderId
			this.index = optoin.index
			this.getOrderDetail()
		},
		methods: {
			//获取详情
			getOrderDetail() {
				let uid = uni.getStorageSync('uid')
				let {
					orderId
				} = this
				getOrderDetail({
					orderId,
					uid
				}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.goods = res.data[0].goods[this.index]
						console.log(this.goods)
					}
				})
			},
			// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							// for (let i = 0; i < lists.length; i++) {
							// 	const result = await this.uploadFilePromise(lists[i].url)
							// 	let item = this[`fileList${event.name}`][fileListLen]
							// 	this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							// 		status: 'success',
							// 		message: '',
							// 		url: result
							// 	}))
							// 	fileListLen++
							// }
						},
						// goods_id	string	是	商品ID	
						// content	string	是	评价内容	
						// score	string	是	打分 1-5	
						// images	string	是	图片地址 多个用逗号分开	
						// uid	string	是	用户ID	
						// attr	string	是	商品属性	
						// orderId	string	是	所属订单ID
			saveOrderEvaluateAdd(){
				let goods_id = this.goods.goods_id
				let attr = this.goods.attr
				let uid = uni.getStorageSync('uid')
				let {content,value,orderId} = this
				console.log(value)
				let images='../../static/images/common/logo.png'
				saveOrderEvaluateAdd({content,score:value,orderId,goods_id,attr,uid,images}).then(res=>{
					if(res.code==1){
						this.$u.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.comment_final {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 20upx;
		background: white;
		padding: 30upx 30upx 0 30upx;

		.comment_finalBox {
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-bottom: 24upx;
			display: flex;
			align-items: center;

			.comment_finalTit {
				font-size: 24upx;
				width: 120upx;
				display: block;
			}

			.comment_xing {
				flex: 1;
				height: auto;
				overflow: hidden;
				padding-left: 48upx;

				text {
					font-size: 48upx;
					color: #eeeeee;
					margin-right: 8upx;
				}

				.act {
					color: #f7c243;
				}
			}
		}
	}

	.comment_share {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;
		padding: 0 30upx;

		textarea {
			width: 100%;
			height: 304upx;
			border-radius: 20upx;
			background: #f6f6f6;
			font-size: 30upx;
			color: #333;
			line-height: 33upx;
			padding: 24upx;
		}

		.comment_pa {
			display: block;
			font-size: 32upx;
			color: #333;
			padding: 32upx 0 24upx;
		}

		image {
			display: block;
			width: 160upx;
			height: 160upx;
		}

		.comment_shareBox {
			width: 100%;
			height: auto;
			overflow: hidden;

			.iconfont {
				font-size: 24upx;
				color: #999999;
				line-height: 88upx;
				float: left;
				display: block;
			}

			.iconfont.act {
				color: #e33b2d;

				&:before {
					content: '\e655';
				}
			}

			.comment_pb {
				font-size: 24upx;
				color: #333333;
				margin-left: 15upx;
				line-height: 90upx;
				display: block;
				float: left;
			}

			.comment_pc {
				float: right;
				color: #bfbfbf;
				font-size: 24upx;
				line-height: 90upx;
			}
		}
	}

	.sale_good {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 30upx;
		background: white;

		image {
			display: block;
			width: 200upx;
			height: 200upx;
			float: left;
		}

		.sale_goodBox {
			width: calc(100% - 200upx);
			height: 200upx;
			position: relative;
			float: left;
			padding-left: 24upx;

			.sale_pa {
				font-size: 24upx;
				line-height: 44upx;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.sale_pb {
				width: calc(100% - 24upx);
				font-size: 32upx;
				color: #e33b2d;
				position: absolute;
				line-height: 44upx;
				font-weight: bold;
				bottom: 7upx;

				.price {}

				.num {
					font-size: 24upx;
					color: #999999;
					float: right;
					font-weight: normal;
					vertical-align: middle;
					line-height: 44upx;
				}
			}
		}
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background: $color1;
		border-radius: 4px;
		margin: 60rpx auto;

		color: #fff;
		font-size: 34rpx;
	}

	.upload-content {
		padding: 24upx 0 0 28upx;
		background-color: #fff;
		overflow: hidden;
	}

	.upload-item {
		position: relative;
		float: left;
		width: 150upx;
		height: 150upx;
		margin-right: 30upx;
		margin-bottom: 30upx;

		&:nth-child(4n) {
			margin-right: 0;
		}

		.upload-img {
			width: 100%;
			height: 100%;
			border-radius: 8upx;
		}

		.upload-del-btn {
			position: absolute;
			right: -16upx;
			top: -14upx;
			width: 36upx;
			height: 36upx;
			border: 4upx solid #fff;
			border-radius: 100px;
		}

		.upload-progress {
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			color: #fff;
			font-size: 24upx;
			border-radius: 8upx;
		}
	}

	.upload-add-btn {
		position: relative;
		float: left;
		width: 150upx;
		height: 150upx;
		z-index: 99;
		border-radius: 8upx;
		background: #f9f9f9;

		&:before,
		&:after {
			content: ' ';
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 4upx;
			height: 60upx;
			background-color: #d6d6d6;
		}

		&:after {
			width: 60upx;
			height: 4upx;
		}

		&:active {
			background-color: #f7f7f7;
		}
	}
</style>
